<%@ page import="java.io.*" %>
<%@page contentType="text/html" %>
<%@page pageEncoding="UTF-8" %>
<%
    //根据用户id在文件找对应的值
    String str;
    boolean flag=false;
    String name=null;
    String userid=null;
    String email=null;
    String phone=null;
    String wechat=null;
    String qq=null;
    String weibo=null;
    String faculty_title=null;
    BufferedReader bufferedReader=new BufferedReader(new InputStreamReader(new FileInputStream("User.txt"),"UTF-8"));
    while (bufferedReader.ready()){
        str=bufferedReader.readLine();
        String[] parts=str.split(",");
        //确实有该用户的信息
        if(parts.length==8&&parts[0].equals("nullde")){
            name=parts[0];
            userid=parts[1];
            email=parts[2];
            phone=parts[3];
            wechat=parts[4];
            qq=parts[5];
            weibo=parts[6];
            faculty_title=parts[7];
            flag=true;
        }
    }
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户主页</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo {
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .loginwin {
        text-align: center;
        border-bottom: 1px solid #e8eaec;
        padding-bottom: 16px;
        margin-bottom: 32px
    }
    .ivu-input-large {
        font-size: 14px;
        padding: 6px 7px;
        height: 36px;
    }
    .ivu-input {
        display: inline-block;
        width: 100%;
        height: 50px;
        line-height: 1.5;
        font-size: 20px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        background-image: none;
        position: relative;
        cursor: text;
        transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
    }
    .ivu-form-item-content {
        position: relative;
        line-height: 50px;
        font-size: 20px;
    }
    .ivu-btn-success {
        color: #fff;
        background-color: #39ace3;
        border-color: #39ace3;
    }
    .iconstyle {
        width: 50px;
        height: 50px;
        margin-left: 5px;
        margin-top: 11px;
    }
</style>
<div id="app" class="layout">
    <Layout>
        <Header>
            <i-menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo" style="background-color: #515a6d;color: white;text-align:
                center;font-size: 18px;font-weight: bold;line-height: 35px;">
                    用户信息
                </div>
                <div class="layout-nav">
                    <Menu-Item name="1">
                        <Icon type="ios-navigate"></Icon>
                        语言
                    </Menu-Item>
                    <Menu-Item name="2">
                        <Icon type="ios-keypad"></Icon>
                        详情
                    </Menu-Item>
                    <Menu-Item name="3" @click.native="logout">
                        <Icon type="ios-analytics"></Icon>
                        退出
                    </Menu-Item>
                    <Menu-Item name="4" @click.native="register">
                        <Icon type="ios-paper"></Icon>
                        注册
                    </Menu-Item>
                </div>
            </i-menu>
        </Header>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
                <i-Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-create"></Icon>
                            个人信息
                        </template>
                        <Menu-Item name="1-1">个人信息</Menu-Item>
                        <Menu-Item name="1-2">绑定信息</Menu-Item>
                    </Submenu>
                </i-Menu>
            </Sider>

            <Layout :style="{padding: '0 24px 24px'}" style="margin-top: 30px;">
                    <Row>
                        <i-col>
                            <Card  style="width:350px;height:495px;float:left;">
                                <p slot="title">
                                    <Icon type="md-contact"></Icon>
                                    个人头像
                                </p>
                                <img src="./jo4.jpg" alt="" style="width:300px;"><br>
                                <form action="/uploadServlet" enctype="multipart/form-data" method="post" name="uploadform">
                                    <input type="file" name="file" id="file"><br>
                                    <input type="text" name="username" id="username" v-model="username" hidden>
                                    <input type="submit" value="上传头像" name="upload">
                                </form>
                            </Card>
                        </i-col>
                        <i-col offset="2">
                            <Card style="width:81%;float:left;margin-left: 50px;  ">
                                <p slot="title">
                                    <Icon type="md-document"></Icon>
                                    个人信息
                                </p>
                                <jsp:useBean id="pinfo" scope="request" class="com.PinfoDTO"/>
                                <form action="./checkpinfo.jsp" method="post" id="pinfoform">
                                    <%--<i-Button type="primary" size="large" style="float: right">修改密码</i-Button>--%>
                                    <i-Button type="primary" size="large" style="float: right" v-on:click="edit">编辑</i-Button>
                                    <i-Button type="primary" size="large" style="float: right" v-on:click="submit">保存</i-Button>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">姓名</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="name" readonly v-model="name" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                                <%=pinfo.getErrMsg("errname")%>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">学号</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="userid" readonly v-model="userid" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">学院</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="faculty_title" v-bind:readonly="isReadOnly" v-model="faculty_title" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">邮箱</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                            <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                            <input name="email" v-bind:readonly="isReadOnly" v-model="email" autocomplete="off"
                                                   spellcheck="false" type="text" placeholder=""
                                                   class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">手机号</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="phone" v-bind:readonly="isReadOnly" v-model="phone" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">微信号</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="wechat" v-bind:readonly="isReadOnly" v-model="wechat" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">QQ</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="qq" v-bind:readonly="isReadOnly" v-model="qq" autocomplete="off" spellcheck="false"
                                                       type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ivu-form-item ivu-form-item-required">
                                        <label class="ivu-form-item-label" style="font-size: 18px;">微博</label>
                                        <div class="ivu-form-item-content">
                                            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                <input name="weibo" v-bind:readonly="isReadOnly" v-model="weibo" autocomplete="off"
                                                       spellcheck="false" type="text" placeholder=""
                                                       class="ivu-input ivu-input-large ivu-input-with-prefix">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </Card>
                        </i-col>
                    </Row>
            </Layout>
        </Layout>
    </Layout>
</div>
<script>
    // "username":"201741402114","name":"%20%20%20","faculty":221,"wx_openid":"o7n4SxJw6Tr3vKcDJZwxv0JeK-44",
    // "group":"Student","faculty_title":"%20%20%20%20%20","openid":"2d1d3883b97fbd7638b1d43fcdc59063
    var app = new Vue({
        el: '#app',
        data() {
            return {
                theme1: 'light',
                name:'<% out.print(name);%>',
                userid: '<% out.print(userid);%>',
                email: '<% out.print(email);%>',
                phone: '<% out.print(phone);%>',
                wechat: '<% out.print(wechat);%>',
                qq: '<% out.print(qq);%>',
                weibo: '<% out.print(weibo);%>',
                faculty_title:'<% out.print(faculty_title);%>',
                isReadOnly: true,
            }
        },
        methods: {
            edit: function () {
                this.isReadOnly = !this.isReadOnly;
            },
            logout: function () {
                window.location.href = "http://localhost:8080/Login.jsp";
            },
            register: function () {
                window.location.href = "http://localhost:8080/Register.jsp";
            },
            save:function () {
                //获取到对应的表单项
            },
            submit:function () {
              document.getElementById("pinfoform").submit();
            }
        },
    })
</script>
</body>
</html>